<script lang="ts" setup>
import { commonTransform } from '@/utils/transform';

import { searchProduct, getChaptersAndEpisodes } from '@/api/product';

import type { ColumnsType } from 'ant-design-vue/es/table';
import type { IChapter, IProduct, ISearchParams, } from '@/types/request';
import type { TransformProduct } from '@/types/table-transform';

const teachers = ref<Map<number, any>>(new Map())
// 转换数据格式
function transformProduct(product: IProduct): TransformProduct {
  return {
    ...commonTransform(product),
    teacher_id: {
      text: teachers.value.get(product.teacher_id)?.name || '未设置',
      value: product.teacher_id
    }
  }
}
// 视频模块的表格列格式
const colums = ref<ColumnsType>([
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    align:'center',
    ellipsis: true,
    width: 200,
    fixed: true
  },
  {
    title: '缩略图',
    dataIndex: 'cover_img',
    key: 'cover_img',
    notShowInput: true,
    align:'center',
    ellipsis: true,
    width: 40,
    showImage: true
  },
  {
    title: '视频管理',
    key: 'video',
    align:'center',
    width: 200,
    notShowInput: true,
  }
])


const searchParams = reactive<ISearchParams>({
  page: 1,
  size: 6,
  total: 0,
  condition: '',
})

// 搜索按钮
let realDataSource = ref<TransformProduct[]>([])
async function handleRequest() {
  const response = await searchProduct(searchParams)
  realDataSource.value = response.data?.current_data?.map((item: IProduct) => transformProduct(item))
  return response
}


// 章列表
let chapters = ref<any>()
// 课程id
let productId = ref<number>(-1)
// 控制弹窗展示与否
let modalVisible = ref<boolean>(false)
// 点击管理按钮
async function handleManager(index: number) {
  modalVisible.value = !modalVisible.value
  productId.value = realDataSource.value[index].id.value
  const { data } = await getChaptersAndEpisodes(productId.value)
  // 章集排序
  chapters.value = data.sort((a: { ordered: number; }, b: { ordered: number; }) => a.ordered - b.ordered).map((chapter: { episodeList: any[]; }) => {
    chapter.episodeList.sort((c, d) => c.ordered - d.ordered)
    return chapter
  })
}
// 关闭弹窗
function handleModalCancel() {
  chapters.value = []
  productId.value = -1
}



</script>

<template>
  <div>
    <Search name="课程" :on-search-request="handleRequest" :searchParams="searchParams" />
    <Table notGmt custom ref="table" :searchParams="searchParams" :expand-columns="colums"
      :real-data-source="realDataSource" :on-request="handleRequest">
      <template #default="{ column, index }">
        <template v-if="column.key === 'video'">
          <a-button type="primary" style="background-color:#1677ff" @click="handleManager(index)">管理</a-button>
        </template>
      </template>
    </Table>
    <a-modal width="60vw" v-model:open="modalVisible" :footer="null" :keyboard="false" :maskClosable="false"
      @cancel="handleModalCancel">
      <div mt-8 />
      <Chapter v-for="(chapter, idx) in chapters" :key="idx" :index="idx" :title="chapter.title" :expand-init="false" mb
        not-allow-operation>
        <Episode v-for="(episode, subIdx) in chapter.episodeList" :key="subIdx" :index="subIdx" :title="episode.title" :episid="episode.id"
          :chapter-index="idx" :hwyun-id="episode.hwyun_id" not-allow-operation />
      </Chapter>
    </a-modal>
  </div>
</template>